<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>杭州公共实训基地</title>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>css/login.css" />
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#send").click(function() {
					var flag = true;
					var uname = $.trim($("#uinput").val());
					var upass = $.trim($("#pinput").val());
					var urole = $.trim($("#rinput").val());
					var ucode = $.trim($("#cinput").val());
					$("#usernamemsg").html("");
					$("#passwordmsg").html("");
					$("#rolemsg").html("");
					$("#codemsg").html("");

					if (null == uname || "" == uname) {
						$("#usernamemsg").html("<font style='color:red; font-size: 12px;'>用户名不能为空!</font>");
						setTimeout(function(){
							$("#usernamemsg").html("");
						}, 3000);
						flag = false;
					}
					
					if (null == upass || "" == upass) {
						$("#passwordmsg").html("<font style='color:red; font-size: 12px;'>密码不能为空!</font>");
						setTimeout(function() {
							$("#passwordmsg").html("");
						}, 3000);
						flag = false;
					}
					
					if (null == urole || "" == urole) {
						$("#rolemsg").html("<font style='color:red; font-size: 12px;'>角色不能为空!</font>");
						setTimeout(function() {
							$("#rolemsg").html("");
						}, 3000);
						flag = false;
					}
					
					if (null == ucode || "" == ucode) {
						$("#codemsg").html("<font style='color:red; font-size: 12px;'>验证码不能为空!</font>");
						setTimeout(function() {
							$("#codemsg").html("");
						}, 3000);
						flag = false;
					}

					if (flag == true) {
						var url="/training/liuyong/ajaxCheckLogin.action";
						var paramsValue = {
							username : uname,
							password : upass,
							role: urole,
							code: ucode
						};
						jQuery.post(url, paramsValue, loginfun, 'json');
					}
				});
				
				//回调函数
				function loginfun(data) {
					var title = $("#msgbox .title span");
					var content = $("#msgbox .content");
					
					if (data.checkLoginResult) {
						title.html("<font color='red'>欢迎登录</font>");
						content.html("您已经成功登录系统,即将进入系统!");
						$("#box").show();
						
						setTimeout(function() {
							$("#box").hide();
							window.location.href="/training/ajax/loginAction.action";
						}, 2000);						
					} else {
						if (data.codeResult == false) {
							setTimeout(function() {
								$("#box").hide();
							}, 2000);
							$("#codemsg").html("<font style='color:red; font-size: 12px;'>验证码错误!</font>");
							setTimeout(function() {
								$("#codemsg").html("");
							}, 3000);
						} else {
							title.html("<font color='red'>登录失败。。。</font>");
							content.html("请输入正确的用户名和密码,并且选择正确的角色 !");
							$("#box").show();
		
							setTimeout(function() {
								$("#box").hide();
							}, 3000);
						}
					}
				}
				
				$("#msgbox img").click(function(){
					$("#box").hide();
				});
				
				$("#box").bind("ajaxStart",function(){
					$(this).show();
				});
			});

			function changeValidateCode(obj) {   
				obj.src="<%=basePath%>ajax/loginCode.action?currentTime="+new Date().getTime();
			}
		</script>
	</head>

	<body>
		<table width="100%" height="100%" border="0" cellspacing="0"
			cellpadding="0">
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="561" style="background: url(login/lbg.gif)">
								<table width="940" border="0" align="center" cellpadding="0"
									cellspacing="0">
									<tr>
										<td height="238" style="background: url(login/login01.jpg)">
											&nbsp;
										</td>
									</tr>
									<tr>
										<td height="190">
											<table width="100%" border="0" cellspacing="0"
												cellpadding="0">
												<tr>
													<td width="208" height="190"
														style="background: url(login/login02.jpg)">
														&nbsp;
													</td>
													<td width="518" style="background: url(login/login03.jpg)">
														<div style="margin-left: 80px;">
														<table width="405" border="0" align="center" cellpadding="0" cellspacing="0">
															<tr>
																<td width="40" height="40">
																	<img src="login/user.gif" width="30" height="30">
																</td>
																<td width="58" height="40" style="font-size: 14px; font-weight: bolder;">
																	用户名:
																</td>
																<td width="186" height="40">
																	<input type="text" name="username"  value="zhang" id="uinput"
																		style="width: 184px; height: 32px; line-height: 34px; background: url(login/inputbg.gif) repeat-x; border: solid 1px #d1d1d1; font-size: 17px; font-family: Verdana, Geneva, sans-serif;">
																</td>
																<td id="usernamemsg"  width="100" height="50"></td>
															</tr>
															<tr>
																<td height="40">
																	<img src="login/password.gif" width="28" height="32">
																</td>
																<td height="40" style="font-size: 14px; font-weight: bolder;">
																	密&nbsp;&nbsp;码:
																</td>
																<td height="40">
																	<input type="password" name="password" value="000000" id="pinput"
																		style="width: 184px; height: 32px; line-height: 34px; background: url(login/inputbg.gif) repeat-x; border: solid 1px #d1d1d1; font-size: 16px;">
																</td>
																<td id="passwordmsg" width="100" height="50"></td>
															</tr>
															<tr>
																<td height="40">
																	<img src="login/role.jpg" width="28" height="32">
																</td>
																<td height="40" style="font-size: 14px; font-weight: bolder;">
																	角&nbsp;&nbsp;色:
																</td>
																<td height="40">
																	<select name="role" id="rinput" style="width: 184px; height: 30px; line-height: 34px; border: solid 1px #d1d1d1; font-size: 16px; font-weight: bold; padding-top: 3px; padding-bottom: 3px;">
																		<option value="3" selected="selected">&nbsp;&nbsp;普通员工</option>
																		<option value="2">&nbsp;&nbsp;普通管理员</option>
																		<option value="1">&nbsp;&nbsp;系统管理员</option>
																	</select>
																</td>
															</tr>
															<tr>
																<td height="40">
																	<img src="login/code.gif" width="28" height="32">
																</td>
																<td height="40" style="font-size: 14px; font-weight: bolder;">
																	验证码:
																</td>
																<td height="40">
																	<input type="text" name="code" id="cinput"
																		style="width: 100px; height: 32px; line-height: 34px; background: url(login/inputbg.gif) repeat-x; border: solid 1px #d1d1d1; font-size: 17px; font-family: Verdana, Geneva, sans-serif;">
																	<img src="/training/ajax/loginCode.action" onclick="changeValidateCode(this)" title="点击图片刷新验证码" style="height: 25px;"/>
																</td>
																<td id="codemsg" width="100" height="40"></td>
															</tr>
															<tr>
																<td height="40">
																	&nbsp;
																</td>
																<td height="40">
																	&nbsp;
																</td>
																<td height="40" align="center">
																	<input type="image" id="send"  src="login/login.gif" width="95" height="34">
																</td>
															</tr>
														</table>
														</div>
													</td>
													<td width="214" style="background: url(login/login04.jpg)">
														&nbsp;
													</td>
												</tr>
											</table>
										</td>
									</tr>
									<tr>
										<td height="133" style="background: url(login/login05.jpg)">
											&nbsp;
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<div id="box">
			<div id="msgbox">
				<div class="title">
					<span></span>
					<img src="/training/login/close.gif" />
				</div>
				<div class="content">正在登录中。。。</div>
			</div>
		</div>
	</body>
</html>
